<template>
  <div class="login-page">
    <div class="container">
      <div class="login-form">
        <img
          src="http://likede2-admin.itheima.net/img/logo.595745bd.png"
          alt=""
          class="login-logo"
        />
        <el-form :model="form" :rules="rules" ref="kunkun">
          <el-form-item prop="loginName">
            <i class="el-icon-mobile-phone"></i>
            <el-input v-model="form.loginName" placeholder="请输入账号"></el-input>
          </el-form-item>

          <el-form-item prop="password">
            <i class="el-icon-lock"></i>
            <el-input v-model="form.password" placeholder="请输入密码" type="password"></el-input>
          </el-form-item>

          <el-form-item class="item" prop="code">
              <i class="el-icon-circle-check"></i>
            <el-input v-model="form.code" placeholder="请输入验证码"></el-input>
           <div class="codeImg">
            <img :src="`https://likede2-java.itheima.net/api/user-service/user/imageCode/${this.form.clientToken}`" alt="" @click="getRandom"/>
           </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login-page',
  data () {
    return {
      form: {
        loginName: '',
        password: '',
        code: '',
        mobile: '',
        clientToken: '1',
        loginType: '0',
        account: ''
      },
      rules: {
        loginName: [
          { required: true, message: '请输入用户名哦~~', trigger: 'blur' },
          {
            pattern: /^\w{5,11}$/,
            message: '用户名为5~11位哦~~',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码哦~~', trigger: 'blur' },
          {
            pattern: /^\w{5,}$/,
            message: '密码至少要5位哦~~',
            trigger: 'blur'
          }
        ],
        code: [
          { required: true, message: '请输入验证码哦~~', trigger: 'blur' },
          {
            pattern: /^\w{4}$/,
            message: '验证码为4位哦~~',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    getRandom () {
      this.form.clientToken = Math.random()
    },
    async onSubmit () {
      try {
        await this.$refs.kunkun.validate()
        await this.$store.dispatch('user/Login', this.form)
        this.$message.success({ message: '登录成功了哦~~', duration: 1000 })
        setTimeout(() => {
          this.$router.push('/')
        }, 500)
      } catch (e) {
        console.log(e)
      }
    }

  }
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.login-page {
  height: 100%;
  .container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url("http://likede2-admin.itheima.net/img/background.be4fae7d.png");
    background-repeat: no-repeat;
    background-size: cover;
    .login-form {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 76px 35px 0;
      width: 518px;
      height: 388px;
      background-color: #fff;
      box-shadow: 0 3px 70px 0 rgb(30 111 72 / 35%);
      border-radius: 10px;

      .login-logo {
        position: absolute;
        width: 96px;
        height: 96px;
        top: -46px;
        left: 50%;
        margin-left: -48px;
      }

      .el-form-item {
        height: 52px;
        margin-bottom: 24px;
        background: #fff;
        border: 1px solid #e2e2e2;
        border-radius: 4px;
        .el-input {
          height: 52px;
          display: inline-block;
          width: 85%;
          ::v-deep .el-input__inner {
            display: inline-block;
            height: 47px;
            line-height: 47px;
            border: 0;
            border-radius: 0;
            padding: 12px 5px 12px 15px;
            color: #999;
            caret-color: #999;
            -webkit-appearance: none;
          }
        }
        i {
          margin-left: 15px;
          font-size: 16px;
          color: inherit;
          vertical-align: middle;
        }
        ::v-deep .el-form-item__content {
          height: 100%;
          button {
            width: 100%;
            height: 100%;
            background-color: #506be8;
          }
        }
        .code {
          width: 70%;
        }
      }
      .item {
        position: relative;
        width: 71%;
        .codeImg {
          position: absolute;
          right: -130px;
          top: 0;
        }
      }
    }
  }
}
</style>
